<template>
	<div class="page">
		<div class="custom">
			<div class="mask"></div>
		</div>
		<!-- 渲染视频列表 -->
		<div v-for="(item,idx) in videoList" :key="idx" class="video-box">
			<div v-if="Math.abs(index-idx)<=3" >
				<chunleiVideoH5 class="video" ref="video" :play="item.flag" @pause="pauseVideo($event,item)"
					:src="item.video_url" poster="../../static/imgs/video_loading.gif" :initialTime="item.initialTime">
				</chunleiVideoH5>

				<cover-view class="videoMask" v-if="playIndex!=idx" @click.stop="clickMask(idx)"></cover-view>


				<div class="bottom">
					<div class="title">
							<text>{{item.title}}</text>
						<u-icon v-if="item.flag" color="#18b566" name="eye-fill" size="15px"></u-icon>
						<u-icon v-else color="#dd6161" name="eye-off" size="15px"></u-icon>						
					</div>					
				</div>

				<!-- <div class="bottomMask" v-if="(playIndex!=idx||timeMask)&&(videoList.length-1===idx)"></div> -->
				<!-- <div :class="videoList.length-1 ===idx ?'empty':''"></div> -->
			</div>
		</div>
	</div>
</template>

<script>
	const videoBoxHeight = 250 //视频盒子高度

	import chunleiVideoH5 from '@/components/chunlei-video-h5/chunlei-video-h5';
	export default {
		components: {
			chunleiVideoH5
		},
		data() {
			return {
				listNumber: 3, //剩余视频小于3时加载视频
				playTop: 200, //播放高度

				index: 0, //当前视频展示索引
				timer: null,
				playIndex: -1,
				timeMask: true,
				isReachBottom: false, //标志位是否触底
				videoList: [{
						video_url: 'https://hls01open.ys7.com/openlive/b262af7c875a49359b9cdc4f3f7b2ca4.hd.m3u8',
						title: '设备1',
						flag: false,

					},
					{
						video_url: 'https://hls01open.ys7.com/openlive/b53356732820439395ede630734b4cdf.hd.m3u8',
						title: '设备2',
						flag: false,

					},
					{
						video_url: 'https://hls01open.ys7.com/openlive/7d3f766fbebe4219b782fb8cdda44714.m3u8',
						title: '设备3',
						flag: false,

					},
					{
						video_url: 'https://hls01open.ys7.com/openlive/03643e3702054fe2a5e070b4471b37df.m3u8',
						title: '设备4',
						flag: false,

					}
				],

			}
		},
		beforeCreate() {
			// #ifdef APP-PLUS-NVUE
			var domModule = weex.requireModule('dom');
			domModule.addRule('fontFace', {
				'fontFamily': "iconfont",
				'src': "url('../../static/srcoll-video/text-icon.ttf')"
			});
			// #endif
		},
		created() {
			//#ifdef APP-PLUS
			plus.screen.lockOrientation("portrait-primary")
			//#endif
		},
		async mounted() {
			this.playIndex = 0
			// this.pushVideoList()
		},
		onHide() {
			for (let item of this.videoList) {
				item.flag = false
			}
		},
		onPageScroll(e) {
			this.index = (e.scrollTop - 44) / videoBoxHeight
			this.debounce(() => {
				this.playIndex = Math.floor((e.scrollTop - 44 + this.playTop) / videoBoxHeight)
			}, 300)()
		},
		onReachBottom() {
			console.log('ReachBottom')
			// this.throttle(() => {
			// 	if (this.videoList.length - 1 <= this.listNumber) {
			// 		this.pushVideoList()
			// 	}
			// }, 200)()
		},
		onPullDownRefresh() {
			//下拉刷新视频列表
			// this.pushVideoList()
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		methods: {

			async pushVideoList() {
				const [, {
					data: res
				}] = await uni.request({
					url: 'https://board.stdag.cn/web3Api/boardv1/userInfo/video/url/list',
					header: {
						Authorization: 'Bearer 5a286b57-a30d-4b6d-84e6-0d9b4f5a3764', //某时可能会失效
						user_id: 'S12020000742'
					}
				})
				//处理获取的数据
				res.data.forEach(item => {
					item.flag = false
					item.title = !item.title ? '默认标题' : item.title
				})
				// console.log(res.data)
				// 如果已经触底则不再添加空数据
				if (!this.isReachBottom) {
					// this.videoList[this.videoList.length-1].flag=true
					// this.videoList.push({
					// 		video_url: '',
					// 		title: '视频加载到底啦!',
					// 		flag: false,
					// 	})
					// this.isReachBottom = true
				}
				//数据没有更新则不重新渲染
				if (res.data.length <= this.videoList.length) return;
				//覆盖预留数据
				this.videoList = res.data
				this.isReachBottom = false
				//追加数据？
				// this.videoList.push(...res.data)
			},
			clickMask(idx) {
				this.playIndex = idx
			},
			pauseVideo(val, item) {
				item.initialTime = val
			},
			debounce(func, delay) {
				return () => {
					if (this.timer) clearTimeout(this.timer);
					this.timer = setTimeout(() => {
						func()
					}, delay)
				}
			},
			throttle(func, delay) {
				return () => {
					if (!this.timerThr) {
						func()
						this.timerThr = setTimeout(() => {
							this.timerThr = null;
						}, delay);
					}
				}
			}
		},
		watch: {
			index: {
				handler: async function(newVal) {
					// this.throttle(() => {
					// 	if (this.videoList.length - newVal - 1 < this.listNumber) {
					// 		this.pushVideoList()
					// 	}
					// }, 200)()
				}
			},
			playIndex(newVal) {
				this.timeMask = false
				setTimeout(() => {
					this.timeMask = true
				}, 2000);
				for (let item of this.videoList) {
					item.flag = false
				}
				this.videoList[newVal].flag = true
			}
		}

	}
</script>

<style scoped>
	/* #ifndef APP-PLUS-NVUE */
	@font-face {
		font-family: "iconfont";
		src: url('~@/static/srcoll-video/text-icon.ttf') format('truetype');
	}

	.iconfont {
		font-family: "iconfont";
		font-size: 16px;
		color: #fff;
	}

	/* #endif*/

	/* #ifdef APP-PLUS-NVUE */
	.iconfont {
		font-family: iconfont;
		font-size: 16px;
		color: #fff;
	}

	/* #endif*/
	.text-sm {
		font-size: 12px;

		color: #fff;
	}

	.marginRight {
		margin-right: 10rpx;
	}

	page {
		background-color: #000;
	}

	.page {
		/* #ifndef APP-PLUS */
		display: flex;
		/* #endif */
		justify-content: flex-start;
		flex-direction: column;
		background-color: #000;
	}

	.custom {
		/* height: 44px; */
		width: 750rpx;
		background-color: #000;
		position: relative;
	}

	.mask {
		position: absolute;
		height: 44px;
		width: 750rpx;
		background-color: rgba(0, 0, 0, 0.7);
	}

	.video-box {
		position: relative;
		height: 250px;
		/* 控制视频盒子高度 */
		background-color: #000;
	}

	.video {
		height: 200px;
		width: 750rpx;
	}

	.videoMask {
		position: absolute;
		top: 0;
		height: 200px;
		width: 750rpx;
		background-color: rgba(0, 0, 0, 0.7);
		z-index: 99;
	}

	.bottom {
		height: 50px;
		/* #ifndef APP-PLUS */
		display: flex;
		/* #endif */
		flex-direction: column;
		justify-content: space-between;
		padding: 10px 10px 0 10px;
		/* #ifndef APP-PLUS */
		box-sizing: border-box;
		/* #endif */
		background-color: #000000;
	}

	.bottomMask {
		position: absolute;
		bottom: 0;
		height: 90px;
		width: 750rpx;
		background-color: rgba(0, 0, 0, 0.7);
	}

	.title {
		height: 32px;
		line-height: 25px;
		font-size: 14px;
		color: #fff;
		border-bottom: 1px dashed #eee;
		display: flex;
		justify-content: space-between;
		
	}

	.avatar {
		height: 50rpx;
		width: 50rpx;
		border-radius: 25rpx;
	}
	/deep/ .u-icon {
		margin-bottom: 5px;
	}
</style>
